<template>
    <div class="my-header">
        <div class="my-header-left">
            <div class="my-header-left-icon" @click="toMain">
                <img :src="logo"/>
            </div>
        </div>
        <div class="my-header-center">
            <el-tag size="large" v-for="(item, index) in cachedMenu" :key="item.path"
                @click="handleTab(item)"
                :class="item.path === router.currentRoute.value.path ? 'checked' : ''"
                :closable="cachedMenu.length > 1" @close="() => handleClose(item)" class="my-header-center-tag">
                {{ item.name }}
            </el-tag>
        </div>
        <div class="my-header-right">
            <UserInfo :userDetail="userDetail"/>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import LocalStorageUtil from '../../utils/LocalStorageUtil';
import UserInfo from '../userinfo/UserInfo.vue';
import utils from '../../utils/utils';
import { useRouter } from 'vue-router';

const baseUrl = import.meta.env.VITE_APP_SERVER;
const logo = ref('');
const theme = utils.getTheme();
const userDetail = ref({});

const router = useRouter();

const cachedMenu = ref([]);

function toMain() {
    router.push({
        path: '/ai',

    })
}

function handleClose(tag) {
    cachedMenu.value = cachedMenu.value.filter(item => item.path !== tag.path);
    utils.globalCacheMenu = cachedMenu.value;
    // 取cachedMenu.value最后一个元素进行路由跳转
    if (cachedMenu.value.length > 0) {
        router.push({
            path: cachedMenu.value[cachedMenu.value.length - 1].path,
        })
    }

}

function handleTab(tag) {
    router.push({
        path: tag.path,
    })
}


onMounted(() => {
    let config:any = LocalStorageUtil.get('WebsiteConfig');
    logo.value = baseUrl + config.website_logo;
    userDetail.value = LocalStorageUtil.get('userDetailInfo');
    // 从全局缓存中获取菜单
    cachedMenu.value = utils.globalCacheMenu;
    console.log(utils.globalCacheMenu);
})
</script>
<style scoped>
.my-header {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.my-header-left {
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
}
.my-header-left-icon {
    height: 60px;
    width: 200px;
    background-color: transparent;
    display: flex;
    align-items: center;
}
.my-header-center {
    flex: 1;
    white-space: nowrap;
    padding: 0 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.my-header-center-tag {
    height: 50px; 
    line-height: 50px;
    padding: 0 15px !important;
    font-weight: 600;
    font-size: 15px;
    color: rgba(9, 100, 205, 0.743);
    background-color: v-bind('theme === "light" ? "rgba(100, 100, 100, 0.3)" : "rgba(240, 240, 240, 0.6)"') !important;
}
.my-header-center-tag.checked {
    background-color: v-bind('theme === "light" ? "rgba(20, 90, 150, 0.3)" : "rgba(100, 100,150, 0.3)"') !important;
    color: v-bind('theme === "light" ? "rgba(20, 90, 150, 1)" : "#fff"') !important;
}
.my-header-left-icon img {
    height: 100%;
    width: 100%;
}
</style>